<template>
  <div class="ssc-table">
    <div class="ssc-table-header">
      <span class="ssc-table-header-title">项目大厅</span>
      <a-button type="primary" @click="goToCreate()"> 新增 </a-button>
    </div>
    <a-table :defaultExpandAllRows="true" :dataSource="list" :columns="columns" :pagination="pagination" :loading="loading" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-tag v-if="record.status === 1" color="success">已发布</a-tag>
          <a-tag v-if="record.status === 2" color="error">已下架</a-tag>
        </template>
        <template v-if="column.key === 'collectedAmount'">
          <text>{{ record.collectedAmount }}/{{ record.requireAmount }}</text>
        </template>
        <template v-if="column.key === 'assRequire'">
          <div v-if="record.assRequire">
            <text>{{ record.assRequire.id }}</text>
            <br />
            <text>{{ record.assRequire.requireName }}</text>
          </div>
          <p v-else> —— </p>
        </template>
        <template v-if="column.key === 'assProducts'">
          <template v-if="record.assProducts && record.assProducts.length">
            <div v-for="item in record.assProducts" :key="item.id" style="margin-top: 10px">
              <text>{{ item.dpId }}</text>
              <br />
              <text>{{ item.productName }}</text>
            </div>
          </template>
          <p v-else> —— </p>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <div>
            <a @click="goToDetail(record.id)">查看</a>
            <a-divider type="vertical" />
            <a v-if="record.status === 2" @click="editState(record.id, 1)">上架</a>
            <a v-else @click="editState(record.id, 2)">下架</a>
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
  import { TablePaginationConfig, TableProps } from 'ant-design-vue'
  import { computed, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { editStateRequire, getRequireList } from '/@/api/exchange/requirement'

  const router = useRouter()
  const columns = [
    { title: 'ID', dataIndex: 'id' },
    { title: '项目名称', dataIndex: 'requireName' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '完成情况', dataIndex: 'collectedAmount', key: 'collectedAmount' },
    { title: '发布时间', dataIndex: 'createdTime' },
    { title: '关联需求单', dataIndex: 'assRequire', key: 'assRequire' },
    { title: '关联产品', dataIndex: 'assProducts', key: 'assProducts' },
    { title: '操作', dataIndex: 'action' },
  ]
  const loading = ref(false)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  })

  const page = computed(() => ({
    pageIndex: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }))
  const searchParams = ref<RequirementTypes.SearchData>()
  const list = ref<RequirementTypes.IResponse[]>([])

  // 分页查询
  const handleTableChange: TableProps['onChange'] = (tabPage: TablePaginationConfig) => {
    pagination.value.current = tabPage.current || 1
    pagination.value.pageSize = tabPage.pageSize || 10
    getData()
  }

  // 获取页面list
  const getData = async () => {
    loading.value = true
    const params = {
      ...page.value,
      ...searchParams.value,
    }
    const { responseData } = await getRequireList(params)
    list.value = responseData.list || []
    pagination.value.total = +responseData.total || 0
    loading.value = false
  }

  // 查询
  const search = (params: RequirementTypes.SearchData) => {
    searchParams.value = {
      status: params.status || undefined,
      releaseBeginTime: params.publishTime.length ? params.publishTime[0] : undefined,
      releaseEndTime: params.publishTime.length ? params.publishTime[1] : undefined,
      keyWord: params.keyWord || undefined,
    }
    pagination.value.current = 1
    getData()
  }

  const editState = async (id: string, status: number) => {
    const { responseCode } = await editStateRequire({ id, status })
    if (responseCode === 100000000) {
      getData()
    }
  }

  // 发布
  const goToCreate = () => {
    router.push({ path: '/requirement/create' })
  }

  // 查看
  const goToDetail = (id: string) => {
    router.push({
      path: '/requirement/detail',
      query: { id },
    })
  }

  defineExpose({
    search,
  })
</script>
<style lang="less" scoped></style>
